<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>毕业设计</title>
    <style>
	*{margin:0;padding:0}
	.yanz{width:400px;margin:50px auto}
	.tc{text-align:center}
	.yanz h2{font-size:18px;padding-bottom:40px}
	.shur-bj{background:#F9F9F9;padding:40px 30px;background-color:#F9F9F9;border:1px solid #D5D5D5;box-shadow:0 0 3px #EEE;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}
	.item{margin-bottom:15px}
	.inp{display:block;width:312px;height:30px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
	.btn{background:#2CB9EA;border:1px solid #2CB9EA;color:#fff; width:100px; text-align:center;padding:12px 0px;font-size:18px;border-radius:4px;cursor:pointer;outline:0;width:100%}
	.btn:hover{background:#1698C5;border:1px solid #1698C5}
	.huoqu{background:#F9F9F9;border:1px solid #2CB9EA;color:#2CB9EA;padding:12px 10px;font-size:14px;border-radius:4px;cursor:pointer;outline:0}
	.huoqu:hover{background:#2CB9EA;color:#fff}
	.text{background:#5cb85c;color:#fff;display:inline-block;padding:15px 30px;text-decoration:none;border-radius:4px}
	#embed-captcha{width:300px;margin:0 auto}
	.show{display:block}
	.hide{display:none}
	#notice{color:red}
    </style>
</head>
<body>

	<div class="yanz">
    	<h2 class="tc">登录页面</h2>
        <div class="shur-bj">
        	<div class="tc" style="padding-bottom:30px">
        	<img src="/img/miaosha_logo.jpg" width="140"/>
        	</div>
        
            <form class="popup" action="/login" method="post">
                <div class="item">
                    <input class="inp" id="telphone" name="telphone" type="text" placeholder="请输入手机号">
                </div>
                <div class="item">
                    <input type="text" id="code_input" class="inp" value="" placeholder="请输入右侧图形验证码"  style="width: 200px; display:inline-block;vertical-align: middle;"/>
                    <span id="v_container" style=" display:inline-block;vertical-align: middle;"></span>

                </div>
                <div class="item">
                    <input class="inp" id="encrpt_password" name="encrpt_password" type="password" placeholder="请输入密码">
                </div>
                <input class="btn" id="embed-submit" type="submit" value="登录" onsubmit="return click()">
            </form>
        </div>
        <p class="tc" style="padding-top:20px; color:#999">还未有秒杀活动短信账户，<a href="/goRegister" style="color:#2CB9EA;text-decoration:none">立即注册</a></p>
	</div>
<script src="/js/jquery.js"></script>
<script src="/js/gVerify.js"></script>
<script type="text/javascript">
    var verifyCode = new GVerify("v_container");
    $("#embed-submit").click(function (e) {
    var telphone = document.getElementById("telphone").value;
    if(!telphone){
		alert("电话号不能为空");
		return false;
	}                                    
    var res = verifyCode.validate(document.getElementById("code_input").value);
	if(!res){
		alert("图形验证码错误");
		return false;
	} 
	var encrpt_password = document.getElementById("encrpt_password").value;
	    if(!encrpt_password){
			alert("密码不能为空");
			return false;
		}  
    });    	        
</script>
</body>
</html>